<template>
  <div class="dp-index">
    <nav-header></nav-header>
    <div :class="tabInx === 0?'tab-bot':'tab-bot2'">
      <div class="tab-bot-item" @click="changeInx(0)" :style="{opacity: tabInx === 0 ? 1 : 0.5}">
        <img src="../../assets/images/lx.png" alt="">
        <span>告警概览</span>
      </div>
      <div class="tab-bot-item" @click="changeInx(1)" :style="{opacity: tabInx === 1 ? 1 : 0.5}">
        <img src="../../assets/images/lx.png" alt="">
        <span>事件详情</span>
      </div>
    </div>
    <div v-if="tabInx === 0" class="one-box">
      <div class="one-left">
        <div class="title-box">
          <p>今日告警趋势(次)</p>
          <span>Alarm trend</span>
        </div>
        <div id="five" style="width: 100%; height: 300px"></div>
        <div class="title-box">
          <p>传感器状态</p>
          <span>Sensor status</span>
        </div>
        <div class="gao-ss">
          <div class="gao-ss-item" v-for="(item, index) in sensorData" :key="index">
            <div class="gao-ss-item-left">
              <img v-if="item.status==2" src="../../assets/images/gj-icon1.png" alt="">
              <img v-if="item.status==1" src="../../assets/images/gj-icon2.png" alt="">
              <img v-if="item.status==0" src="../../assets/images/gj-icon3.png" alt="">
              <div>
                <p>{{ item.equipmentName }}</p>
                <span>{{ item.createTime }}</span>
              </div>
            </div>
            <div :class="'gao-ss-item-right'+item.status">
              <span v-if="item.status==0">正常</span>
              <span v-if="item.status==1">已处理</span>
              <span v-if="item.status==2">未处理</span>
            </div>
          </div>
        </div>
      </div>
      <div class="one-center">
        <div class="one-top">
          <div class="one-top-item">
            <img src="../../assets/images/cl1.png" alt="">
            <p>
              今日事件总数
              <span>{{ totalData.total }}</span>
            </p>
          </div>
          <div class="one-top-item">
            <img src="../../assets/images/cl2.png" alt="">
            <p>
              今日未处理
              <span>{{ totalData.wcl }}</span>
            </p>
          </div>
          <div class="one-top-item">
            <img src="../../assets/images/cl3.png" alt="">
            <p>
              今日已处理
              <span>{{ totalData.ycl }}</span>
            </p>
          </div>
        </div>
        <div class="details">
          <h5>铁塔信息</h5>
          <p>铁塔名称：<span>{{ towerDetails.towerName }}</span></p>
          <p>铁塔类型：<span>{{ towerDetails.towerType }}</span></p>
          <p>检修时间：<span>2025/01/01 10:20</span></p>
          <p>经纬度：<span>{{towerDetails.lat}}°；{{towerDetails.lon}}°</span></p>
          <p>风险等级：<span>中等</span></p>
        </div>
      </div>
      <div class="one-left">
        <div class="title-box">
          <p>告警事件详情</p>
          <span>Alarm event details</span>
        </div>
        <div class="table-box1">
          <el-table :data="tableData" stripe style="width: 100%" height="480">
            <el-table-column prop="equipmentId" label="采集设备">
              <template slot-scope="scope">
                {{  options.find(item => item.equipmentId === scope.row.equipmentId).equipmentName}}
              </template>
            </el-table-column>
            <el-table-column prop="alarmShow" width="160" show-overflow-tooltip label="告警内容"></el-table-column>
            <el-table-column prop="createTime" label="告警时间" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
        <div class="title-box">
          <p>告警排行Top5</p>
          <span>Alarm ranking</span>
        </div>
        <div id="six" style="width: 100%; height: 280px"></div>
      </div>
    </div>
    <div class="alert-box" v-else>
      <div class="alert-left">
        <!-- <img src="../../assets/images/ta1.png" alt="" /> -->
        <div ref="threeCanvas" style="width: 90%; height: calc(100% - 100px);"></div>
        <div class="details">
          <h5>铁塔信息</h5>
          <p>铁塔名称：<span>{{ towerDetails.towerName }}</span></p>
          <p>铁塔类型：<span>{{ towerDetails.towerType }}</span></p>
          <p>检修时间：<span>2025/01/01 10:20</span></p>
          <p>经纬度：<span>{{towerDetails.lat}}°；{{towerDetails.lon}}°</span></p>
          <p>风险等级：<span>中等</span></p>
        </div>
      </div>
      <div class="alert-right">
        <div class="title-box">
          <p>告警事件详情</p>
          <span>Alarm event details</span>
        </div>
        <div class="tabs-box">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in options" :key="index" :label="item.equipmentName"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="select-box">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!-- <el-form-item label="采集设备">
              <el-select
                v-model="formInline.equipmentId"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.equipmentName"
                  :value="item.equipmentId"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="告警等级">
              <el-select
                v-model="formInline.alarmLevel"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in options1"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择日期">
              <el-date-picker
                size="mini"
                v-model="formInline.createTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
              <!-- <el-date-picker
                size="mini"
                v-model="formInline.createTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker> -->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit">查询</el-button>
              <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
              <el-button size="mini" icon="el-icon-warning-outline" v-if="activeName>0" @click="changeState">{{ state==0?'忽略告警':'显示告警' }}</el-button>
              <!-- <el-button type="primary" size="mini">导出文件</el-button> -->
            </el-form-item>
          </el-form>
        </div>
        <div class="table-box">
          <el-table :data="tableData" stripe style="width: 100%" height="600">
            <el-table-column prop="createTime" label="告警时间"></el-table-column>
            <el-table-column prop="equipmentId" label="采集设备">
              <template slot-scope="scope">
                {{  options.find(item => item.equipmentId === scope.row.equipmentId).equipmentName}}
              </template>
            </el-table-column>
            <el-table-column prop="alarmLevel" label="告警等级">
                <template slot-scope="scope">
                  <span v-if="scope.row.alarmLevel === '0'" style="color: #ffa800;">普通</span>
                  <span v-else-if="scope.row.alarmLevel === '1'" style="color: #ff3b3b;">严重</span>
                </template>
            </el-table-column>
            <el-table-column prop="alarmShow" width="400" label="告警内容"></el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination-box">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :current-page="queryParams.pageNum"
              :page-size="queryParams.pageSize"
              @current-change="pageChange"
            ></el-pagination>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { listAlarm } from "@/api/system/alarm";
import { listEquipment } from "@/api/system/equipment";
import { listTower } from "@/api/system/tower";
import navHeader from "./components/navHeader.vue";
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import {equipmentState,getState,getToday,getTop,getAlarm,getByDay} from "@/api/dpindex.js"
export default {
  name: "alertEvent",
  components: {
    navHeader,
  },
  dicts:['alertevent_status'],
  data() {
    return {
      options:[],
      options1: [
        {
          value: "0",
          label: "普通",
        },
        {
          value: "1",
          label: "严重",
        },
      ],
      formInline: {},
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        alarmLevel: null,
        equipmentId: null,
        createTime:null,
      },
      tableData: [],
      total:0,
      towerDetails:{},
      activeName: 0,
      tabInx:0,
      chart: null,
      chart1: null,
      state: 0,
      chartData:{v:[],k:[]},
      sensorData:[],
      chartData1:{v:[],k:[]},
      totalData:{}
    };
  },
  computed: {
    
  },
  mounted() {
    this.getList();
    this.getOptions()
    this.getTower()
    this.getSensor()
    this.$nextTick(() => {
      this.initChart();
      this.initChart1();
    });
  },
  methods: {
    getSensor(){
      getAlarm().then(res=>{
          this.sensorData = res
      })
      getByDay().then(res=>{
        this.totalData = res
      })
    },
    changeState(){
      if(this.state==0){
        this.state = 1
      }else{
        this.state = 0
      }
      equipmentState({status:this.state,equipmentId:this.options[this.activeName].equipmentId}).then(res=>{
        if(res.code==200){
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },
    changeInx(e){
      this.tabInx = e
      this.activeName = 0
      this.queryParams.equipmentId= this.options[0].equipmentId
      this.getList()
      if(e==0){
        this.getSensor()
        this.$nextTick(() => {
          this.initChart();
          this.initChart1();
        });
      }else{
        this.chart.dispose();
        this.chart = null;
        this.chart1.dispose();
        this.chart1 = null;
        this.$nextTick(() => {
          this.initThreeJS();
        })
      }
    },
    initThreeJS() {
      const width = this.$refs.threeCanvas.clientWidth;
      const height = this.$refs.threeCanvas.clientHeight;
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(0x000000, 0); // 设置为透明，第二个参数为透明度（alpha）
      renderer.setSize(width, height);
      const ambientLight = new THREE.AmbientLight(0xffffff, 1);
      scene.add(ambientLight);
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(5, 5, 5);
      scene.add(directionalLight);
      
      const controls = new OrbitControls(camera, renderer.domElement);
      camera.position.z = 5;
      controls.update(); // 更新控制器状态

      this.$refs.threeCanvas.appendChild(renderer.domElement);
      const loader = new GLTFLoader();
      loader.load(
        'models/new.glb', // GLTF model path
        (gltf) => {
          const material = new THREE.MeshStandardMaterial({ color: 0xffffff }); // 绿色
          gltf.scene.traverse(function(child) {
              if (child.isMesh) {
                  child.material = material;
              }
          });
          scene.add(gltf.scene);
          gltf.scene.rotation.x = Math.PI/-2; 
          gltf.scene.position.set(0, 0.8, 0);
          gltf.scene.scale.set(0.07, 0.07, 0.07);
        },
        undefined,
        (error) => {
          console.error(error);
        }
      );
 
      camera.position.z = 4.5;
      const animate = function () {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();
    },
    initChart() {
      this.chartData={v:[],k:[]}
      this.chart = echarts.init(document.getElementById("five"));
      getToday().then(res => {
        if(res.length>0){
          res.forEach(item => {
            this.chartData.v.push(item.V);
            this.chartData.k.push(item.K);
          });
        }
        this.setOptions();
      })
    },
    setOptions(){
      this.chart.setOption({
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 10,
          containLabel: true,
        },
        textStyle: {
          color: "#86909C",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
              show: true,
              rotate: 20,//35度角倾斜显示
          },
          axisLine: {
            lineStyle: {
              color: "#fff", // 设置坐标轴颜色为蓝色
              width: 1,
              type: "solid",
            },
          },
          axisTick: {
            show: false, // 隐藏 X 轴的刻度线
          },
          data: this.chartData.v,
        },
        yAxis: {
          type: "value",
          splitNumber: 3,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.8)", // 设置分割线颜色为蓝色
              width: 1,
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: this.chartData.k,
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: "rgba(0,255,255,1)",
            },
            itemStyle: {
              color: "rgba(0,255,255,1)", 
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0, 255, 255,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 255, 255,0)",
                },
              ]),
            },
          },
        ],
      });
    },
    initChart1() {
      this.chart1 = echarts.init(document.getElementById("six"));
      getTop().then(res=>{
        if(res.length>0){
          let data=res.slice(0,5)
          this.chartData1.k =data.sort(function(a, b) { return a.alertCount - b.alertCount; }).map(item => item.equipmentName)
          this.chartData1.v=data.sort(function(a, b) { return a.alertCount - b.alertCount; }).map(item => item.alertCount)
        }
        this.setOptions1();
      })
    },
    setOptions1(){
      this.chart1.setOption({
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 10,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        textStyle: {
          color: "#fff",
        },
        xAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.3)", // 设置分割线颜色为蓝色
              }
            }
          },
        ],
        yAxis: [
          {
            type: "category",
            data: this.chartData1.k,
          },
        ],
        series: [
          {
            name: "风险次数",
            type: "bar",
            stack: "vistors",
            barWidth: "30%",
            data: this.chartData1.v,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: '#3DB5FF' },
                { offset: 1, color: 'rgba(43, 82, 150, 0.3)' }
              ])
            }
          },
        ],
      })
    },
    handleClick(tab, event) {
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
        alarmLevel: this.formInline.alarmLevel || null,
        equipmentId: this.options[this.activeName].equipmentId || null,
        createTime: this.formInline.createTime || null
      }
      this.getList()
    },
    getList() {
      if(this.tabInx == 1&&this.activeName >0){
        let id = this.options[this.activeName].equipmentId
        getState(id).then(response => {
          this.state = response.data.status
          if(response.data.status == '1'){
            this.tableData = []
            this.total = 0
          }else{
            listAlarm(this.queryParams).then(response => {
              this.tableData = response.rows;
              this.total = response.total;
            });
          }
        })
      }else{
        listAlarm(this.queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
        });
      }
    },
    pageChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    getOptions(){
      listEquipment({
        pageNum: 1,
        pageSize: 1000
      }).then(response => {
        this.options = response.rows;
        this.options.unshift({
          equipmentId: null,
          equipmentName: '全部'
        })
      });
    },
    getTower(){
      listTower({
        pageNum: 1,
        pageSize: 1
      }).then(response => {
        this.towerDetails = response.rows[0];
      });
    },
    onSubmit() {
      console.log(this.formInline);
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
        alarmLevel: this.formInline.alarmLevel || null,
        equipmentId: this.options[this.activeName].equipmentId || null,
        createTime: this.formInline.createTime || null
      }
      this.getList()
    },
    onReset(){
      this.formInline = {}
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
        alarmLevel: null,
        equipmentId: this.options[this.activeName].equipmentId || null,
        createTime: null
      }
      this.getList()
    }
  },
};
</script>
<style lang="scss" scoped>
.tab-bot2{
  position: fixed;
  width: 30%;
  left: 100px;
  top: 120px;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  .tab-bot-item{
    margin-bottom: 20px;
  }
}
.tab-bot{
  position: fixed;
  bottom: 120px;
  width: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-bot-item{
  width: 148px;
  height: 40px;
  background: url('../../assets/images/tab-bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 20px;
  span{
    font-size: 22px;
    color: #fff;
    font-family: 'youshe';
  }
}
.dp-index {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/gj-bg1.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  .tabs-box{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: rgba(2, 26, 65, 0.5);
    font-family: 'dinb';
    ::v-deep .el-tabs__item{
      color: rgba(205, 229, 240, 0.8);;
      font-size: 16px;
    }
    ::v-deep .el-tabs__item.is-active {
        color: #fff;
    }
    ::v-deep .el-tabs__active-bar{
      background-color: #fff;
      filter: blur(0.6px);
      box-shadow: 0px 0px 2px 0px #009DFF;
    }
    ::v-deep .el-tabs__nav-wrap::after{
      background-color: rgba(255, 255, 255, 0);
    }
  }
  .one-box{
    width: 100%;
    height: calc(100% - 80px);
    padding: 50px 30px 20px 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex: 1;
    background: url("../../assets/images/gj-bg.png") no-repeat;
    background-size: 100% 100%;
    .one-left{
      width: 20%;
      .gao-ss{
        width: 100%;
        .gao-ss-item{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 26px;
          .gao-ss-item-left{
            display: flex;
            align-items: center;
            img{
              width: 40px;
              display: block;
              margin-right:10px;
            }
            p{
              margin: 0;
              font-size: 14px;
              color: #fff;
            }
            span{
              font-size: 12px;
              color: #fff;
            }
          }
          .gao-ss-item-right0{
            width: 62px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            font-size: 12px;
            color: #6FFDCB;
            background: linear-gradient(270deg, rgba(28, 143, 102, 0.1) 3%, #1C8F66 50%, rgba(28, 143, 102, 0.1) 100%);
          }
          .gao-ss-item-right2{
            width: 62px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            font-size: 12px;
            color: #FD6F6F;
            background: linear-gradient(270deg, rgba(114, 31, 47, 0.1) 0%, #721F2F 47%, rgba(114, 31, 47, 0.1) 100%);
          }
          .gao-ss-item-right1{
            width: 62px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            font-size: 12px;
            color: #6FCBFD;
            background: linear-gradient(270deg, rgba(28, 102, 143, 0.1) 3%, #1C668F 50%, rgba(28, 102, 143, 0.1) 100%);
          }
        }
      }
    }
    .one-center {
      width: 55%;
      position: relative;
      .one-top{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .one-top-item{
          width: 25%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          &:nth-of-type(2){
            p{
              color: #E8CD70;
            }
          }
          &:nth-of-type(3){
            p{
              color: #82F3A0;
            }
          }
          img{
            width: 70px;
            display: block;
            margin-right:10px;
          }
          p{
            margin: 0;
            font-size: 18px;
            color: #87BFD9;
            span{
              font-size: 30px;
              display: block;
              color: #fff;
              font-family: 'dinb';
            }
          }
        }
      }
      .details {
        position: absolute;
        left: 15%;
        top: 35%;
        width: 290px;
        background: url('../../assets/images/tt-bg.png') no-repeat;
        background-size: 100% 100%;
        padding: 30px;
        box-sizing: border-box;
        h5 {
          margin: 0;
          font-size: 24px;
          color: #fff;
          box-sizing: border-box;
          font-family: 'youshe';
        }
        p {
          margin: 10px 0 0 0;
          font-size: 14px;
          color: #C5F7FF;
          span {
            color: #fff;
          }
        }
      }
    }
  }
  .table-box1{
    width: 100%;
    margin-bottom: 20px;
    ::v-deep .el-table {
      background-color: rgba(0, 0, 0, 0) !important;
      color: #fff;
      scrollbar-color: #021A41 lightblue;
    }
    ::v-deep .el-table__body {
      -webkit-border-vertical-spacing: 4px;
    }
    ::v-deep .el-table tr {
      background-color: rgba(68, 68, 68, 0.2) !important;
    }
    ::v-deep
      .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
      background: rgba(121, 41, 4, 0.2) !important;
    }
    ::v-deep .el-table td.el-table__cell {
      border-bottom: none !important;
    }
    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background: rgba(0, 0, 0, 0) !important;
      color: #fff;
      border-bottom: 0.2px solid #5d5d5d;
    }
    ::v-deep .el-table::before {
      height: 0 !important;
    }
    ::v-deep
      .el-table--enable-row-hover
      .el-table__body
      tr:hover
      > td.el-table__cell {
      background: rgba(121, 41, 4, 0.4) !important;
    }
  }
  .table-box {
    width: 100%;
    height: 70%;
    background: rgba(2, 26, 65, 0.5);
    ::v-deep .el-table {
      background-color: rgba(0, 0, 0, 0) !important;
      color: #fff;
      scrollbar-color: #021A41 lightblue;
    }
    ::v-deep .el-table tr {
      background-color: rgba(0, 0, 0, 0) !important;
    }
    ::v-deep
      .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
      background: rgba(21, 77, 160, 0.2) !important;
    }
    ::v-deep .el-table td.el-table__cell {
      border-bottom: none !important;
    }
    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background: rgba(21, 77, 160, 0.2) !important;
      color: #fff;
      border-bottom: none !important;
    }
    ::v-deep .el-table::before {
      height: 0 !important;
    }
    ::v-deep
      .el-table--enable-row-hover
      .el-table__body
      tr:hover
      > td.el-table__cell {
      background: rgba(69, 193, 255, 0.6) !important;
    }
  }
  .title-box {
    width: 100%;
    background: url("../../assets/images/title-bg.png") 0 0 no-repeat;
    display: flex;
    align-items: center;
    padding-left: 50px;
    margin-bottom: 20px;
    p {
      padding: 0;
      font-size: 22px;
      color: #fff;
      font-family: "youshe";
      margin: 0 20px 0 0;
    }
    span {
      font-size: 12px;
      text-transform: uppercase;
      color: #8ec7ff;
    }
  }
  .alert-box {
    width: 100%;
    height: calc(100% - 80px);
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex: 1;
    .alert-left {
      width: 40%;
      height: 100%;
      position: relative;
      display: flex;
        align-items: center;
        justify-content: flex-start;
      img {
        width: 300px;
        display: block;
        margin-left: 60px;
      }
      .details {
        position: absolute;
        right: 10%;
        bottom: 10%;
        width: 260px;
        border-radius: 6px;
        background: rgba(2, 26, 65, 0.5);
        box-sizing: border-box;
        border: 1px solid #7BF6FF;
        padding-bottom: 10px;
        h5 {
          margin: 0;
          font-size: 16px;
          color: #fff;
          padding: 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #7BF6FF;
        }
        p {
          margin: 5px 0 0 0;
          font-size: 14px;
          color: #fff;
          padding: 0 10px;
          box-sizing: border-box;
          span {
            color: #9e9e9e;
          }
        }
      }
    }
    .alert-right {
      width: 60%;
      .select-box {
        width: 100%;
        padding: 0 10px 10px 10px;
        box-sizing: border-box;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        background: rgba(2, 26, 65, 0.5);
        margin-bottom: 20px;
        .el-button{
          border-radius: 4px;
          background: #00303D;
          color: #fff;
          box-shadow: inset 0px 0px 8px 0px #1E96D6;
        }
      }
      ::v-deep .el-form-item {
        margin-bottom: 0;
      }
      ::v-deep .el-form-item__label {
        color: #fff;
      }
      ::v-deep .el-input--mini .el-input__inner {
        border: 1px solid #7BF6FF;
        color: #fff;
        background-color: rgba(2, 26, 65, 0.5) !important;
      }
      ::v-deep .el-range-editor.el-input__inner {
        border: 1px solid #7BF6FF;
        color: #fff;
        background-color: rgba(2, 26, 65, 0.5) !important;
      }
      ::v-deep .el-range-editor--mini .el-range-input {
        color: #fff;
        background-color: rgba(2, 26, 65, 0.5) !important;
      }
      
      .pagination-box{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top:20px;
        ::v-deep .el-pagination.is-background .btn-prev{
            background-color: rgba(2, 26, 65, 0.5);
            color: #fff;
        }
        ::v-deep .el-pagination.is-background .btn-next{
            background-color: rgba(2, 26, 65, 0.5);
            color: #fff;
        }
        ::v-deep .el-pagination.is-background .el-pager li{
            background-color: rgba(2, 26, 65, 0.5);
            color: #fff;
        }
        ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
            background-color: rgba(69, 193, 255, 0.6) !important;
        }
      }
    }
  }
}
</style>
